<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/move.css">
    <link rel="stylesheet" href="../dist/css/swiper.min.css">
</head>
<body>
    <header class="header">
        <nav class="nav">
            <p class="col_p">关注</p>
            <p>最新</p>
        </nav>
    </header>
    
    <main class="main">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="box_on">
                        <img class="img_time" src="../images/food_03.png" alt="">
                        <div>
                            <img src="../images/food_06.png" alt="">
                            <img src="../images/food_08.png" alt="">
                            <img src="../images/food_11.png" alt="">
                            <img src="../images/food_13.png" alt="">
                            <img src="../images/food_15.png" alt="">
                            <img src="../images/food_20.png" alt="">
                            <img src="../images/food_25.png" alt="">
                            <img src="../images/food_27.png" alt="">
                            <img src="../images/food_29.png" alt="">
                            <img src="../images/food_32.png" alt="">
                            <img src="../images/food_34.png" alt="">
                            <img src="../images/food_35.png" alt="">
                        </div>
                    </div> 
                </div>     
                <div class="swiper-slide">     
                    <div class="box_on">
                        <img class="img_time" src="../images/food_03.png" alt="">
                        <div>
                            <img src="../images/food_06.png" alt="">
                            <img src="../images/food_08.png" alt="">
                            <img src="../images/food_11.png" alt="">
                            <img src="../images/food_13.png" alt="">
                            <img src="../images/food_15.png" alt="">
                            <img src="../images/food_20.png" alt="">
                            <img src="../images/food_25.png" alt="">
                            <img src="../images/food_27.png" alt="">
                            <img src="../images/food_29.png" alt="">
                            <img src="../images/food_32.png" alt="">
                            <img src="../images/food_34.png" alt="">
                            <img src="../images/food_35.png" alt="">
                        </div>
                    </div>   
                </div>
            </div>
        </div> 
    </main>    
    <footer class="footer">
        <div>
            <a href="../index.html">
                <img src="../images/home.png" alt="">
                <p>推荐</p>
            </a>
        </div>
        <div>
            <a href="find.html">
                <img src="../images/foot_22.png" alt="">
                <p>发现</p>
            </a>
        </div>
        <div>
            <a href="issue.html">
                <img src="../images/foot_11.png" alt="">
                <p>发布</p>
            </a>
        </div>
        <div>
            <img src="../images/hei.png" alt="">
            <p>动态</p>
        </div>
        <div>
            <a href="my.html">
                <img src="../images/foot_19.png" alt="">
                <p>我的</p>
            </a>
        </div>
    </footer>


    <script src="../js/swiper.min.js"></script>
    <script src="../js/flexible.debug (1).js"></script>
    <script src="../js/jquery-1.12.4.min.js"></script>
    <script language="javascript"> 
        var galleryTop = new Swiper('.swiper-container',{ 															
	        spaceBetween:0,
	        speed: 750,
	        onSlideChangeStart: function () {
	            $(".nav .col_p").removeClass('col_p')
	            $(".nav p").eq(galleryTop.activeIndex).addClass('col_p')
	        }
	    });
	    $(".nav p").on('touchstart mousedown', function (e) {
	        e.preventDefault()
	        $(".nav .col_p").removeClass('col_p')
	        $(this).addClass('col_p')
	        galleryTop.slideTo($(this).index())
	    })
	    $(".nav .col_p").click(function (e) {
	        e.preventDefault()
	    })
    </script>
    <script>
        var swiper = new Swiper('.swiper-container');
    </script>
</body>
</html>